<template>
  <n-button
    text
    :type="type"
    size="small"
    iconPlacement="right"
    :="$attrs"
  >
    <template #icon>
      <n-icon
        :component="selectIcon"
        :size="14"
      />
    </template>
    <slot></slot>
  </n-button>
</template>

<script lang="ts" setup>
  import { SettingsOutline, TrashOutline } from '@vicons/ionicons5'
  import type { Component } from 'vue'
  const props = withDefaults(
    defineProps<{
      icon?: Component | null
      type: string
    }>(),
    {
      type: 'primary',
      icon: null
    }
  )

  const selectIcon = computed(() => {
    const iconMap = {
      primary: SettingsOutline,
      error: TrashOutline
    }
    return props.icon || iconMap[props.type as keyof typeof iconMap]
  })
</script>

<style scoped lang="scss"></style>
